<template>
    <h1>{{username}}</h1>
    <h1>{{count}}</h1>
    <h1>{{arr}}</h1>
    <button @click="rest">点击重置</button>
    <button @click="update">点击修改</button>
</template>

<script setup>
    // 直接引入store就可以了
    import {useUser} from "../store/users"
    import {storeToRefs} from "pinia"

    let userStore = useUser()

    // 解构state,使用storeToRefs保持响应性

    let {username,count,arr} = storeToRefs( userStore);

    // setTimeout(() => {
    //    username.value="李雷"
    // //    count++
    // //    arr.push(10)
    // }, 2000);
    

    console.log(userStore.username);

    let rest = function(){
        userStore.$reset()
    }

    let update=()=>{
        // userStore.$patch({
        //     username:"关羽"+count.value,
        //     count:count.value+1,           
        // })


        userStore.$patch((state)=>{
            state.username = '内尔吗'
            state.count = state.count+20,
            state.arr.push(state.count)
        })
    }

    userStore.$subscribe((mutatation,state)=>{
        console.log(state);
        
    })
</script> 